<div class="import-data">
  <form [formGroup]="_formGroup" (ngSubmit)="submitForm()" class="import-data-body">
    <div nz-row [nzType]="'flex'" [nzGutter]="5" [nzAlign]="'middle'" class="row-container">
      <div nz-col [nzSpan]="6" class="text-align-right">图层名称：</div>
      <div nz-col [nzSpan]="18">
        <nz-input [nzType]="'text'" [nzPlaceHolder]="'输入图层名称'" [nzSize]="'large'" [nzDisabled]="_loading" formControlName="layerName"></nz-input>
      </div>
    </div>
    <div nz-row [nzType]="'flex'" [nzGutter]="5" [nzAlign]="'middle'" class="row-container">
      <div nz-col [nzSpan]="6" class="text-align-right">上传至服务器：</div>
      <div nz-col [nzSpan]="4">
        <nz-switch formControlName="uploadToServer" [nzDisabled]="_loading">
          <i class=" anticon anticon-check" checked></i>
          <i class=" anticon anticon-cross" unchecked></i>
        </nz-switch>
      </div>
      <div nz-col [nzSpan]="6" class="text-align-right">立即显示：</div>
      <div nz-col [nzSpan]="8">
        <nz-switch formControlName="show" [nzDisabled]="_loading">
          <i class=" anticon anticon-check" checked></i>
          <i class=" anticon anticon-cross" unchecked></i>
        </nz-switch>
      </div>
    </div>
    <div nz-row [nzType]="'flex'" [nzGutter]="5" [nzAlign]="'middle'" class="row-container">
      <div nz-col [nzSpan]="24">
        <nz-upload
          nzType="drag"
          [nzMultiple]="false"
          [nzShowUploadList]="false"
          [nzDisabled]="_loading"
          (nzChange)="handleChange($event)">
          <div class="upload-container" [ngClass]="{
            'upload-disabled': _loading
          }">
            <p class="ant-upload-drag-icon">
              <i class="anticon anticon-inbox"></i>
            </p>
            <p class="ant-upload-text">单击或拖动文件到该区域上传</p>
            <p class="ant-upload-hint">支持单个文件上传。支持GeoJSON、CSV、XLS和Shp文件。</p>
          </div>
        </nz-upload>
      </div>
    </div>
  </form>
  <div class="import-data-foot">
    <button nz-button [nzType]="'primary'" [nzSize]="'large'" [nzLoading]="_loading" (click)="handleConfirm()">确认</button>
    <button nz-button [nzType]="'default'" [nzSize]="'large'" [disabled]="_loading" (click)="handleCancel()">取消</button>
  </div>
</div>